import { ref, computed } from 'vue'

/**
 *
 * @descrption 导航栏菜单展开/缩进控制函数
 */
export const useCollapsed = () => {
  const isCollapsed = ref(false)
  const onCollapsed = () => {
    isCollapsed.value = !isCollapsed.value
  }

  const computedNavLeftStyle = computed((): string => {
    return !isCollapsed.value ? 'nav-left-no-collapsed' : 'nav-left-collapsed'
  })

  const computedNavRightStyle = computed((): string => {
    return !isCollapsed.value ? 'nav-right-no-collapsed' : 'nav-right-collapsed'
  })

  return {
    isCollapsed,
    onCollapsed,
    computedNavLeftStyle,
    computedNavRightStyle
  }
}
